@extends('common.base-master')

@section('html-head')
@endsection

@section('html-body')
    <div class="signup-page">
        <div class="header">
            <div class="bg-meetboluoji"></div>
            <!-- 已注册提示，先隐藏 -->
            <div class="worning-text hidden"></div>
        </div>
        <!-- 注册页面内容 -->
        <div class="signup-form">
           <form action="post" class="">
               <div class="input-container phone-input">
                   <span class="input-icon bg-phone_icon"></span>
                   <input type="text" name="phone" id="phone" placeholder="手机号">
                   <span class="error-icon bg-tanhao_icon hidden"></span>
               </div>
               <div class="input-container nickname-input">
                   <span class="input-icon bg-user_icon"></span>
                   <input type="text" name="nickname" id="nickname"  placeholder="昵称">
                   <span class="error-icon bg-tanhao_icon hidden"></span>
               </div>
               <div class="input-container password-input">
                   <span class="input-icon bg-lock_icon"></span>
                   <input type="password" name="password" id="password"  placeholder="密码">
                   <span class="error-icon bg-tanhao_icon hidden"></span>
               </div>
               <div class="sex-radio">
                   <label for="male">
                   男
                   <input type="radio" value="1" name="sex" id="male" checked hidden />
                   <div class="circle">
                       <span></span>
                   </div>
                   </label>
                   <label for="female">
                   女
                   <input type="radio" value="2" name="sex" id="female" hidden/>
                   <div class="circle">
                       <span></span>
                   </div>
                   </label>
               </div>
               <div class="input-container half-container">
                   <span class="input-icon bg-tick_icon"></span>
                   <input  type="text" name="ver" class="ver-input" id="code" placeholder="验证码">
                   <span class="error-icon bg-tanhao_icon hidden"></span>
                   <span class="getver" id="get-code">获取验证码</span>
               </div>
               <div class="input-container half-container">
                   <span class="input-icon bg-mail_icon"></span>
                   <input  type="text" name="invicode" class="invicode" id="invite-code" placeholder="邀请码">
                   <span class="error-icon bg-tanhao_icon hidden"></span>
               </div>
               <div class="submit-btn" id="btn-send" style="text-align: center;line-height: 50px;">注册</div>
           </form>
        </div>

        <!-- 提示框，先隐藏 -->
        <div class="alert-container hidden">
            <div class="alert-box">
                <span class="bg-simile_icon"></span>
                <span class="alert-msg">注册成功</span>
                <span class="alert-tips">3s后将自动跳转到登录页面</span>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;

            //获取短信验证码
            var countdown=60;
            var canGetCode = true;
            $('#get-code').click(function () {
                var obj = $(this);
                if(canGetCode){
                var phone = $('#phone').val();
                if(!myreg.test(phone)){
                    $.toast("请正确输入手机号码!", "forbidden");
                    return false;
                }

                $.ajax({
                    url:"{{route('Api.Auth.getVerifyCodeByPhone')}}",
                    type:"post",
                    dataType:"json",
                    data:{phone:phone},
                    success:function (object) {
                        if(object.level == 'success'){
                            settime(obj);
                        }else {
                            $.toast(object.message, "forbidden");
                        }
                    },
                    error:function (object) {
                        console.log(object);
                    }
                });
                }
            });
            function settime(obj) { //发送验证码倒计时
                if (countdown == 0) {
                    canGetCode=true;
                    obj.removeClass('getting');
                    obj.html("获取验证码");
                    countdown = 60;
                    return;
                } else {
                    canGetCode=false;
                    obj.html("重新发送(" + countdown + ")");
                    obj.addClass('getting');
                    countdown--;
                }
                setTimeout(function(){settime(obj) },1000)
            }

            //注册
            $('#phone').blur(function () {
                var phone = $('#phone').val();
                if(phone == ''){
                    $('.worning-text').html('手机号不能为空！');
                    $('.worning-text').removeClass('hidden');
                    $('#error-icon-phone').removeClass('hidden');
                    return false;
                }

                if (!myreg.test(phone)) {
                    $('.worning-text').html('请正确输入手机号！');
                    $('.worning-text').removeClass('hidden');
                    $('#error-icon-phone').removeClass('hidden');
                    return false;
                }

                $('.worning-text').html('');
                $('.worning-text').addClass('hidden');
                $('#error-icon-phone').addClass('hidden');
                phoneCheck = true;
            });

            $('#password').blur(function () {
                var password = $('#password').val();

                if (password.length <6 || password.length>20) {
                    $('.worning-text').html('密码要求6～20个字符！');
                    $('.worning-text').removeClass('hidden');
                    $('#error-icon-phone').removeClass('hidden');
                    return false;
                }

                $('.worning-text').html('');
                $('.worning-text').addClass('hidden');
                $('#error-icon-phone').addClass('hidden');
            });


            $('#btn-send').click(function () {
                var phone    = $('#phone').val();
                var password = $('#password').val();
                var nickname = $('#nickname').val();
                var sex = $('input:radio[name="sex"]:checked').val();
                var code = $('#code').val();

                if(!myreg.test(phone)){
                    $('.worning-text').html('请正确输入手机号！');
                    $('.worning-text').removeClass('hidden');
                    return false;
                }

                if(password.length <6 || password.length>20){
                    $('.worning-text').html('密码要求6～20个字符！');
                    $('.worning-text').removeClass('hidden');
                    return false;
                }

                if(nickname == ''){
                    $.toast("昵称不能为空", "forbidden");
                    return false;
                }

                $.ajax({
                    url:"{{route('Api.Auth.signUp')}}",
                    type:"post",
                    dataType:"json",
                    data:{
                        phone:phone,
                        password:password,
                        nickname:nickname,
                        sex:sex,
                        code:code
                    },
                    success:function(obj){
                        if(obj.level == 'success'){
                            $.toast("注册成功",function() {
                                window.location.href="{{route('Home.User.baibaoxiang')}}";
                            });
                        }else {
                            $.toast(obj.message,"forbidden");
                        }

                    },
                    error:function(obj){
                        console.log(obj);
                    }
                });
            });
        });
    </script>
@endsection